import React, { Component } from 'react'
import '../detail.css';
import OTC from '../image/OTC.png'
import { ActionBar } from 'react-vant';
import { addcar } from '../api/index'
import { Toast } from 'react-vant';
import axios from "axios"
import { CheckCircleOutlined, ExclamationCircleOutlined, YoutubeOutlined } from '@ant-design/icons';
export default class Detail extends Component {
    state = {
        info: this.props.location.state.data
    }
    save = () => {
        this.props.history.push('/main/shop')
    }
    tocar = () => {
        this.props.history.push('/car')
    }
    Addcar = async (item) => {
        await addcar(item)
        Toast.success('加入成功');
    }
    pay = () => {
        axios({
            url: '/a',
        }).then(res => {
            console.log(res.data);
        })

    }
    render() {
        const { info } = this.state;
        return (
            <div className="detail">
                <div className="header10">
                    <p onClick={() => this.save()}>&lt;</p>
                    <p>商品详情</p>
                </div>
                <div className="main11">
                    <div className="main-top">
                        <img src={info.img} alt="" />
                    </div>
                    <div className="main-bottom">
                        <div className="bottom1">
                            <p className="price">￥{info.price}</p>
                            <p className="titlewu">  <img src={OTC} alt="" />{info.title}  0.5*40粒</p>
                        </div>
                        <div className="bottom2">
                            <p><YoutubeOutlined />主治功能:</p>
                            <p>强身健体，安心养脑。口服一次5粒，一日3次</p>
                        </div>
                        <div className="bottom3">
                            <p><span>药房：</span>   天士力大药房</p>
                            <p><span>运费：</span>  运费6元·满99元包邮</p>
                            <p><span>服务：</span>   <CheckCircleOutlined />正品保证 <CheckCircleOutlined /> 隐私发货 <ExclamationCircleOutlined />不支持无理由退换</p>
                        </div>
                    </div>
                </div>
                <footer>
                    <ActionBar>
                        <ActionBar.Icon icon="chat-o" text="客服" />
                        <ActionBar.Icon icon="cart-o" text="购物车" onClick={() => { this.tocar() }} />
                        <ActionBar.Button color="orange" type="warning" text="加入购物车" onClick={() => { this.Addcar(this.state.info) }} />
                        <ActionBar.Button color="orangered" type="danger" text="立即购买" onClick={() => this.pay()} />
                    </ActionBar>
                </footer>
            </div>
        )
    }
}



